<template>
	<div>
		<v-Header :item="headerMess"></v-Header>
		<div class="nav">
			<span class="nav-name">{{title}}</span>
			<span class="nav-time">{{time}}</span>
		</div>
		<div class="article">
			
			<p v-html="main" class="main-text"></p>
			<div class="article-foodter">
				<div class="article-name">{{publisher}}</div>
				<div class="article-time">{{date}}</div>
			</div>
		</div>
	</div>
</template>
<script>
import my from '@/api/my/index'
import { toast } from '@/util/index'
import Header from '@/components/Header'
  export default {
  	
    data () {
      return {
      	headerMess:{
	        src:require("../../assets/nav_back.png"),
	        headerText: '公告详情',
	        right: ''
	    },
        msg: '你好',
        id:"",
        title:"",
	  	time:"",
	  	main:"",
	  	date:"",
	    name: '',
	    publisher:"",
      }
    },
    components: {
	    "v-Header":Header,
	},
    methods: {
    	
		getParams () {
			let routerParams = this.$route.params.name;
			alert(routerParams);
		    this.msg = routerParams
		},
     	back() {
			this.$router.back(-1)
		},
		pxToRem(_s){
		    var reg = /(\:|: )+(\d)+(px)/gi;
		    let newStr= _s.replace(reg, function(_x){
		        _x = _x.replace(/(\:|: )/,'').replace(/px/i,'');
		        return ':' + parseFloat(_x) / 45 + 'rem';
		    });
		    return newStr;
		}
    },
    mounted(){
    	
    	
    	let routerParams = this.$route.query.id;
		this.id=routerParams;
		
		let senddata = {
			userId:window.localStorage.getItem("token"),
			id:this.id,
			plat:"mlj"
		}
	
		my.noticeDetail(senddata).then((res) => {
			if (res.data.code == 200) {
				
				this.title=res.data.data.title;
				this.time=res.data.data.createTime;
				this.main= this.pxToRem(res.data.data.content);
				this.date=res.data.data.publishTime;
				this.publisher=res.data.data.publisher;
			}else if(res.data.code==222){
	            this.$router.push({path:'/login'})
	        }else {
				toast(res.data.message)
			}
		})
    },
     beforeRouteEnter(to,from,next){
	    document.querySelector('title').innerText='谋略家'
	      next()
	  }
  }
</script>
<style lang="less" scoped>
@import '../../less/config.less';
.header{
	padding:0 @p30;
	display: flex;
	justify-content:space-between;
	align-items: center;
	height:@hwrap;
	color:#fff;
	font-size:.48rem;
	background:#000;
	img,.img{
		width: 30px;
		height: 30px;
	}
}
.nav{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 1.76rem;
	.nav-name{
		font-size: @f34;
		color: white;
	}
	.nav-time{
		font-size:@f24;
		color: @Color;
		margin-top: .4533rem;
	}
}
.article{
	padding: 0.58667rem 0.66667rem;
	font-size: @f28;
	color: #FFFFFF;
	border-top:1px solid #262934;
	div{
		line-height: .64rem;
		margin: 1.493333rem 0  2.6666666rem ;
	}
	.main-text{
		font-size:  0.37333rem !important;
		p{
			font-size:  0.37333rem !important;
			span{
				font-size:  0.37333rem !important;
			}
			
		}
	}
	.article-foodter{
		display: flex;
		justify-content: center;
		align-items: flex-end;
		flex-direction: column;
		.article-name,.article-time{
			margin: 0;
		}
		
		
	}
}
</style>